Frontend Micro-Frontend Router: Uygulamalar Arası Navigasyon

Modern web geliştirmede, micro-frontend mimarisi, büyük ve karmaşık uygulamalar oluşturmanın bir yolu olarak önemli ölçüde ilgi görmüştür. Monolitik bir ön ucu (frontend) daha küçük, bağımsız ve dağıtılabilir birimlere (micro-frontend'ler) ayırmayı içerir. Bu mimarideki temel zorluklardan biri, kullanıcıların bu bağımsız micro-frontend'ler arasında sorunsuz bir şekilde geçiş yapmasına olanak tanıyan uygulamalar arası gezinmeyi yönetmektir. Bu makale, ön uç micro-frontend yönlendirmesi ve uygulamalar arası gezinme hakkında kapsamlı bir rehber sunmaktadır.

Micro-Frontend'ler Nedir?

Micro-frontend'ler, bağımsız olarak sunulabilen ön uç uygulamalarının tek ve tutarlı bir kullanıcı deneyimi oluşturacak şekilde bir araya getirildiği bir mimari tarzdır. Bu, arka uçtaki (backend) mikroservislere benzer. Her bir micro-frontend genellikle ayrı bir ekibe aittir, bu da daha fazla özerklik, daha hızlı geliştirme döngüleri ve daha kolay bakım sağlar. Micro-frontend'lerin faydaları şunlardır:

• Bağımsız Dağıtım: Ekipler, uygulamanın diğer bölümlerini etkilemeden kendi micro-frontend'lerini dağıtabilirler.
• Teknoloji Çeşitliliği: Farklı micro-frontend'ler farklı teknolojiler kullanılarak oluşturulabilir, bu da ekiplerin iş için en iyi aracı seçmesine olanak tanır. Örneğin, bir ekip React kullanırken diğeri Vue.js veya Angular kullanabilir.
• Ölçeklenebilirlik: Her bir micro-frontend bağımsız olarak ölçeklendirilebildiği için uygulama daha kolay ölçeklenebilir.
• Geliştirilmiş Sürdürülebilirlik: Daha küçük kod tabanlarını anlamak ve sürdürmek daha kolaydır.
• Ekip Özerkliği: Ekipler, kendi kodları ve geliştirme süreçleri üzerinde daha fazla kontrole sahiptir.

Bir Micro-Frontend Yönlendiricisine Neden İhtiyaç Duyulur?

İyi tanımlanmış bir yönlendirme stratejisi olmadan, kullanıcılar micro-frontend'ler arasında gezinirken kopuk ve sinir bozucu bir deneyim yaşayacaktır. Bir micro-frontend yönlendiricisi, tüm uygulama genelinde gezinmeyi yönetmek için merkezi bir mekanizma sağlayarak bu sorunu çözer. Bu, şunları yönetmeyi içerir:

• URL Yönetimi: URL'nin, kullanıcının uygulama içindeki mevcut konumunu doğru bir şekilde yansıtmasını sağlamak.
• Durum (State) Yönetimi: Gerektiğinde micro-frontend'ler arasında durumu paylaşmak.
• Tembel Yükleme (Lazy Loading): Performansı artırmak için micro-frontend'leri yalnızca ihtiyaç duyulduğunda yüklemek.
• Kimlik Doğrulama ve Yetkilendirme: Farklı micro-frontend'ler arasında kullanıcı kimlik doğrulama ve yetkilendirme işlemlerini yönetmek.

Uygulamalar Arası Gezinme Stratejileri

Bir micro-frontend mimarisinde uygulamalar arası gezinmeyi uygulamak için birkaç yaklaşım vardır. Her yaklaşımın kendi avantajları ve dezavantajları vardır ve en iyi seçim, uygulamanızın özel gereksinimlerine bağlıdır.

1. Merkezi Bir Yönlendirici Kullanımı (Single-Spa)

Single-Spa, micro-frontend'ler oluşturmak için popüler bir framework'tür. Farklı uygulamalar arasındaki gezinmeyi yönetmek için merkezi bir yönlendirici kullanır. Ana uygulama, orkestratör görevi görür ve mevcut URL'ye göre micro-frontend'leri oluşturmaktan (render) ve kaldırmaktan (unmount) sorumludur.

Nasıl Çalışır:

1. Kullanıcı belirli bir URL'ye gider.
2. single-spa yönlendiricisi URL değişikliğini yakalar.
3. URL'ye dayanarak, yönlendirici hangi micro-frontend'in aktif olması gerektiğini belirler.
4. Yönlendirici, ilgili micro-frontend'i etkinleştirir ve diğer aktif micro-frontend'leri kaldırır.

Örnek (Single-Spa):

home, products ve cart adında üç micro-frontend'iniz olduğunu varsayalım. single-spa yönlendiricisi aşağıdaki gibi yapılandırılır:

import { registerApplication, start } from 'single-spa'; registerApplication( 'home', () => import('./home/home.app.js'), location => location.pathname === '/' ); registerApplication( 'products', () => import('./products/products.app.js'), location => location.pathname.startsWith('/products') ); registerApplication( 'cart', () => import('./cart/cart.app.js'), location => location.pathname.startsWith('/cart') ); start();

Bu örnekte, her bir micro-frontend single-spa'ya kaydedilir ve URL'ye göre micro-frontend'in ne zaman aktif olması gerektiğini belirlemek için bir fonksiyon sağlanır. Kullanıcı /products adresine gittiğinde, products micro-frontend'i etkinleştirilecektir.

Avantajları:

• Yönlendirme üzerinde merkezi kontrol.
• Basitleştirilmiş durum yönetimi (single-spa orkestratörü tarafından yönetilebilir).
• Mevcut uygulamalarla kolay entegrasyon.

Dezavantajları:

• Tek hata noktası (Single point of failure). Orkestratör çökerse, tüm uygulama etkilenir.
• Verimli bir şekilde uygulanmazsa performans darboğazı haline gelebilir.

2. Module Federation (Webpack 5)

Webpack 5'in Module Federation özelliği, çalışma zamanında (runtime) farklı Webpack build'leri arasında kod paylaşmanıza olanak tanır. Bu, bir build'den (host) diğerine (remote) bileşenleri, modülleri ve hatta tüm uygulamaları sunabileceğiniz anlamına gelir. Bu, her bir micro-frontend'in ayrı bir Webpack build'i olduğu micro-frontend'ler oluşturmayı kolaylaştırır.

Nasıl Çalışır:

1. Her bir micro-frontend ayrı bir Webpack projesi olarak oluşturulur.
2. Bir micro-frontend, ana (host) uygulama olarak belirlenir.
3. Ana uygulama, uzak (remote) micro-frontend'lerden hangi modülleri kullanmak istediğini tanımlar.
4. Uzak micro-frontend'ler, ana uygulamaya hangi modülleri sunmak istediklerini tanımlar.
5. Çalışma zamanında, ana uygulama sunulan modülleri uzak micro-frontend'lerden gerektiği gibi yükler.

Örnek (Module Federation):

Bir host (ana) ve bir remote (uzak) uygulamanız olduğunu varsayın.

host/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: ['react', 'react-dom'], }), ], };

remote/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remote', exposes: { './Button': './src/Button', }, shared: ['react', 'react-dom'], }), ], };

Bu örnekte, host uygulaması Button bileşenini remote uygulamasından tüketir. shared seçeneği, her iki uygulamanın da react ve react-dom'un aynı sürümünü kullanmasını sağlar.

Avantajları:

• Merkezi olmayan mimari. Her micro-frontend bağımsızdır ve ayrı olarak geliştirilip dağıtılabilir.
• Kod paylaşımı. Module Federation, çalışma zamanında farklı uygulamalar arasında kod paylaşmanıza olanak tanır.
• Tembel yükleme (Lazy loading). Modüller yalnızca ihtiyaç duyulduğunda yüklenir, bu da performansı artırır.

Dezavantajları:

• Kurulumu ve yapılandırması single-spa'ya göre daha karmaşıktır.
• Sürüm çakışmalarını önlemek için paylaşılan bağımlılıkların dikkatli bir şekilde yönetilmesini gerektirir.

3. Web Bileşenleri (Web Components)

Web Bileşenleri, yeniden kullanılabilir özel HTML elemanları oluşturmanıza olanak tanıyan bir dizi web standardıdır. Bu bileşenler, kullanılan framework'ten bağımsız olarak herhangi bir web uygulamasında kullanılabilir. Bu, UI bileşenleri oluşturmak ve paylaşmak için teknolojiden bağımsız bir yol sağladıkları için onları micro-frontend mimarileri için doğal bir uyum haline getirir.

Nasıl Çalışır:

1. Her bir micro-frontend, kullanıcı arayüzünü (UI) bir dizi Web Bileşeni olarak sunar.
2. Ana uygulama (veya başka bir micro-frontend), bu Web Bileşenlerini içe aktararak ve kendi HTML'sinde kullanarak tüketir.
3. Web Bileşenleri kendi render ve mantık işlemlerini kendileri yönetir.

Örnek (Web Bileşenleri):

micro-frontend-a.js:

class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Micro-Frontend A'dan Merhaba!

`; } } customElements.define('micro-frontend-a', MyComponent);

index.html (ana uygulama):

Ana Uygulama

Bu örnekte, micro-frontend-a.js dosyası micro-frontend-a adında bir Web Bileşeni tanımlar. index.html dosyası bu dosyayı içe aktarır ve Web Bileşenini kendi HTML'sinde kullanır. Tarayıcı, Web Bileşenini render ederek "Micro-Frontend A'dan Merhaba!" mesajını görüntüler.

Avantajları:

• Teknolojiden bağımsız. Web Bileşenleri herhangi bir framework ile veya hiç framework olmadan kullanılabilir.
• Yeniden kullanılabilirlik. Web Bileşenleri farklı uygulamalarda kolayca yeniden kullanılabilir.
• Kapsülleme (Encapsulation). Web Bileşenleri kendi stillerini ve mantıklarını kapsülleyerek uygulamanın diğer bölümleriyle çakışmaları önler.

Dezavantajları:

• Uygulaması diğer yaklaşımlara göre daha ayrıntılı (verbose) olabilir.
• Eski tarayıcıları desteklemek için polyfill'ler gerektirebilir.

4. Iframe'ler

Iframe'ler (Inline Frames), micro-frontend'leri izole etmek için eski ama hala geçerli bir seçenektir. Her micro-frontend kendi iframe'i içinde çalışır ve bu da yüksek derecede bir izolasyon sağlar. Iframe'ler arası iletişim postMessage API'si kullanılarak sağlanabilir.

Nasıl Çalışır:

1. Her micro-frontend ayrı bir web uygulaması olarak dağıtılır.
2. Ana uygulama, her bir micro-frontend'i bir iframe içine dahil eder.
3. Ana uygulama ile micro-frontend'ler arasındaki iletişim postMessage API'si kullanılarak yapılır.

Örnek (Iframe'ler):

index.html (ana uygulama):

Ana Uygulama

Bu örnekte, index.html dosyası her biri farklı bir micro-frontend'e işaret eden iki iframe içerir.

Avantajları:

• Yüksek derecede izolasyon. Micro-frontend'ler birbirinden tamamen izole edilmiştir, bu da çakışmaları önler.
• Uygulaması kolay. Iframe'ler basit ve iyi anlaşılmış bir teknolojidir.

Dezavantajları:

• Iframe'ler arasında iletişim kurmak zor olabilir.
• Birden fazla iframe'in getirdiği ek yük (overhead) nedeniyle performans sorunları yaşanabilir.
• Sorunsuz entegrasyon eksikliği nedeniyle kötü kullanıcı deneyimi.

Micro-Frontend'ler Arasında Durum (State) Yönetimi

Micro-frontend'ler arasında durumu yönetmek, uygulamalar arası gezinmenin kritik bir yönüdür. Birkaç strateji kullanılabilir:

• URL Tabanlı Durum: Durumu URL içinde kodlamak. Bu yaklaşım, uygulama durumunu URL'ler aracılığıyla paylaşılabilir ve kolayca yer imlerine eklenebilir hale getirir.
• Merkezi Durum Yönetimi (Redux, Vuex): Micro-frontend'ler arasında durumu paylaşmak için global bir durum yönetimi kütüphanesi kullanmak. Bu, önemli ölçüde paylaşılan duruma sahip karmaşık uygulamalar için özellikle yararlıdır.
• Özel Olaylar (Custom Events): Micro-frontend'ler arasında durum değişikliklerini iletmek için özel olaylar kullanmak. Bu yaklaşım, micro-frontend'ler arasında gevşek bir bağ (loose coupling) sağlar.
• Tarayıcı Depolama (LocalStorage, SessionStorage): Durumu tarayıcı depolama alanında saklamak. Bu yaklaşım, tüm micro-frontend'ler arasında paylaşılması gerekmeyen basit durumlar için uygundur. Ancak, hassas verileri saklarken güvenlik konularına dikkat edin.

Kimlik Doğrulama ve Yetkilendirme

Kimlik doğrulama ve yetkilendirme, herhangi bir web uygulamasının hayati yönleridir ve bir micro-frontend mimarisinde daha da önemli hale gelirler. Yaygın yaklaşımlar şunlardır:

• Merkezi Kimlik Doğrulama Servisi: Özel bir servis, kullanıcı kimlik doğrulamasını yönetir ve token'lar (örneğin, JWT) yayınlar. Micro-frontend'ler daha sonra bu token'ları doğrulayarak kullanıcı yetkilendirmesini belirleyebilir.
• Paylaşılan Kimlik Doğrulama Modülü: Paylaşılan bir modül, kimlik doğrulama mantığını yönetmekten sorumludur. Bu modül tüm micro-frontend'ler tarafından kullanılabilir.
• Uçta (Edge) Kimlik Doğrulama: Kimlik doğrulama, ağın ucunda (örneğin, bir ters proxy veya API ağ geçidi kullanarak) yönetilir. Bu yaklaşım, micro-frontend'lerdeki kimlik doğrulama mantığını basitleştirebilir.

Micro-Frontend Yönlendirmesi için En İyi Uygulamalar

Micro-frontend yönlendirmesini uygularken akılda tutulması gereken bazı en iyi uygulamalar şunlardır:

• Basit Tutun: İhtiyaçlarınızı karşılayan en basit yönlendirme stratejisini seçin.
• Micro-Frontend'leri Ayrıştırın (Decouple): Bağımsız geliştirme ve dağıtımı teşvik etmek için micro-frontend'ler arasındaki bağımlılıkları en aza indirin.
• Tutarlı bir URL Yapısı Kullanın: Kullanıcı deneyimini ve SEO'yu iyileştirmek için tüm micro-frontend'lerde tutarlı bir URL yapısı sürdürün.
• Tembel Yükleme (Lazy Loading) Uygulayın: Performansı artırmak için micro-frontend'leri yalnızca ihtiyaç duyulduğunda yükleyin.
• Performansı İzleyin: Herhangi bir darboğazı belirlemek ve gidermek için micro-frontend uygulamanızın performansını düzenli olarak izleyin.
• Açık İletişim Kanalları Kurun: Farklı micro-frontend'ler üzerinde çalışan ekiplerin, geliştirme çabalarını koordine etmek ve entegrasyon sorunlarını çözmek için açık iletişim kanallarına sahip olduğundan emin olun.
• Sağlam Hata Yönetimi Uygulayın: Tekil micro-frontend'lerdeki hataları zarif bir şekilde yönetmek ve bunların tüm uygulamayı etkilemesini önlemek için sağlam bir hata yönetimi uygulayın.
• Otomatik Testler: Micro-frontend uygulamanızın kalitesini ve kararlılığını sağlamak için birim testleri, entegrasyon testleri ve uçtan uca testler dahil olmak üzere kapsamlı otomatik testler uygulayın.

Sonuç

Micro-frontend yönlendirmesi, ölçeklenebilir ve sürdürülebilir web uygulamaları oluşturmanın karmaşık ama temel bir yönüdür. Bu makalede özetlenen farklı yönlendirme stratejilerini ve en iyi uygulamaları dikkatlice göz önünde bulundurarak, kullanıcılarınız için sorunsuz ve kullanıcı dostu bir deneyim oluşturabilirsiniz. Single-Spa gibi merkezi bir yönlendirici, Module Federation, Web Bileşenleri veya hatta Iframe'ler olsun, doğru yaklaşımı seçmek özel ihtiyaçlarınıza ve önceliklerinize bağlıdır. Ayrıştırmayı (decoupling), tutarlı URL yapılarını ve performans optimizasyonunu önceliklendirmeyi unutmayın. İyi tasarlanmış bir yönlendirme stratejisi uygulayarak, micro-frontend mimarisinin tüm potansiyelini ortaya çıkarabilir ve küresel bir kitle için gerçekten olağanüstü web uygulamaları oluşturabilirsiniz.